<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="/callimachus/template.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
    xmlns:owl="http://www.w3.org/2002/07/owl#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:calli="http://callimachusproject.org/rdf/2009/framework#"
    xmlns:foaf="http://xmlns.com/foaf/0.1/"
    xmlns:skos="http://www.w3.org/2004/02/skos/core#"
    xmlns:vcard="http://www.w3.org/2006/vcard/ns#"
    xmlns:gr="http://purl.org/goodrelations/v1#"
    xmlns:directory="http://dir.w3.org/rdf/2012/directory/">
<head>
	<title>New Product, Service, or Project</title>
    <script type="text/javascript">
        jQuery(function($) {
            calli.insertResource(jQuery.extend(jQuery.Event('drop'),
                {target:$('#org')[0],dataTransfer:{getData:function(){return location.pathname}}}
            )); 
        });
    </script>
</head>
<body>
    <h1>New Product, Service, or Project</h1>
	<form typeof="gr:ProductOrServiceModel"
            method="POST" action="" enctype="application/rdf+xml"
            onsubmit="return calli.saveResourceAs(event)">
		<div>
			<label for="label">Label</label>
			<input id="label" autofocus="autofocus" required="required" value="{rdfs:label}" />
		</div>
        <div id="org" class="dropzone field" dropzone="link s:text/uri-list" ondrop="return calli.insertResource(event)">
    		<label>Offered by</label>
            <div rel="gr:hasManufacturer" class="vbox">
				<span about="?org" typeof="vcard:Organization" class="ui-state-highlight ui-corner-all">
					<span property="vcard:organization-name" />
					<span property="vcard:organization-unit" />
				</span>
            </div>
		</div>
		<div class="vbox">
			<label for="page">Web page</label>
			<input type="url" id="page" placeholder="Web page with more detail" value="{foaf:page}" />
		</div>
		<div dropzone="link s:text/uri-list" ondrop="return calli.insertResource(event)">
			<label>Depiction <a href="?create=/callimachus/Image" title="Upload"
    				onclick="return calli.createResource(event)" class="ui-icon ui-icon-newwin" /></label>
			<div rel="foaf:depiction">
                <span about="?depiction" typeof="foaf:Image" class="ui-state-highlight ui-corner-all">
    				<img src="{?depiction}" style="max-height:10em;max-width:10em" />
                </span>
			</div>
		</div>
		<div>
			<label for="comment">Comment</label>
			<textarea id="comment" class="auto-expand">{rdfs:comment}</textarea>
		</div>
		<button id="submit" type="submit">Create</button>
	</form>
</body>
</html>
